With our items working, the next step is to add basic navigation for these items.
This includes selecting an item for opening and filtering items with the search field here in the app.
We'll start with the search field.
What we want is to simply filter all the elements by title.
For example, type in GitHub into the field should leave only this first item visible as that's the
only title containing the text GitHub back in approaches as the search field is part of the user interface
at that selecter.
Search equals document don't get element by I.D. Search the ID of that search input, then we can add
the listener to full to items when this item receives text input.
Listening on search.
Four key up now will have to loop all of our items to check each of them.
We can do this by class name as all the items have a class of item.
But to convert that HDMI collection to an array, we can say array dot from.
So create an array from document dogit element by class name read item.
Just to clarify what's happening here.
This get elements by class name selector returns an object of type HTML collection very similar to a
normal JavaScript array, but not quite so we can't loop it directly but passing it to JavaScript array
from method.
We essentially just convert its type to a standard array, meaning we can now loop it.
The elements in disarray stay exactly the same so we can still use them.
We'll loop this array with for each providing the item in the loop function.
And all we want to do here is hide any items that don't match the search value.
I'll assign the result of the magic to has much checking the item, not in a text, the only text being
that title.
So this will work perfectly to lowercase.
No reason to check.
Case sensitive matches includes search value.
The text value of the search input as match will now hold a boolean value based on whether the item
text matches the search field.
So set the relevant items.
Display property with item dot style dot display equals using a ternary operator.
If has match is true, said the display value to flex flex being the current display value of the items
else, meaning the search did not match the item none.
So hiding the item.
Save this to test.
I'll add a third item to have a bit more research, you know, just dot org.
Check for that GitHub value again, and that works with only get being unique enough to filter down
to that single item just leaves node and excess leaves only electron.
OK, that's our search done.
Next up, we can implement the item selection.
The reason we want to add item selection is that we might not always be interacting directly with items.
Remember, this app will have a menu with which to open items or even keyboard shortcuts or things will
implement later on.
So to open or delete an item isn't always as simple as clicking on it.
That being the reason we always want a selected item to indicate an item as being selected, then I'll
add a simple left hand border.
Over to the stylesheet main DOCSIS find the read item clause here, adding to all items border left,
10 pixels solid, light gray.
This being the unselected border color, we can also add a Hova color to make the cursor into action
a bit better.
Read item over.
Set out in background to be a very light gray with lastly read item not selected, so a read item with
a selected class make that left board a color dodger blue.
We can test this.
Reload the window.
Hovering now provides a bit of feedback, a small but useful improvement, and when we add a class of
selected to one of these items, I'll just do it directly.
In the dev tools selected, we see that blue border indicating that this item is now selected.
So let's add that selection logic.
Then I'll add this as a new exported function of the items module.
So in items Dargis set item as selected.
Calling the function select this function will hold a possible event object when triggered with a click
or something similar, with the first step being to select the currently selected item or remove its
selected class.
Get that element with document target elements by class, name read item selected, of which there can
only be one.
So array index zero accessing the elements class list and removing selected.
Then we can add the class to the newly selected item or clicked item for now, getting that element
from the click event object.
This argument here with e dot current target being the element that was clicked.
Class list dot add selected.
OK, so we have this function now which we can use when an item is clicked.
But it's not as simple as adding a click listener on all of the items as when new items get added.
That listener won't be set on them.
So instead we can bind the click listener on each item as it gets added to the app interface.
Easiest place to do this is going to be in the ADD function immediately after appending an item say
item.
Note the new item element we create and add add event listener click.
This dot select, so when this element is clicked, call the select function with this click event as
each one argument, another useful addition will be preselecting.
The first item be that when the uploads or once the first item gets added manually, we can simply check
how many items exist in the items container if document doget elements by class name read item dot length
being the length of this HTML collection, which of course at this point having already added this item,
must be one or more equals one.
So only this item has been added.
Call on the first item.
Glassless dot add selected.
Save and test this immediately, the first item added from our stored items is already selected click
to select a different item and that works.
Now, as mentioned, we want to also be able to navigate items using the keyboard.
So using the up down arrows, we should be able to select the previous or next item from the currently
selected one.
To do this, I'll switch back to approaches, keeping our user interface logic here.
Navigate item selection with up or down arrows.
This time we're not listening on a specific element.
So add a global listener with document dot.
Add event listener.
Key down.
The event object checking if event dot key equals arrow up.
Or event dot key equals arrow down.
Call items, diet change selection with the name of the key as the function argument dot key.
At this function to the items module.
Move to newly selected item.
Export change election with that direction argument being either arrow up or arrow down, the first
thing then to determine in this function is which item is currently selected.
Let current item equal.
We're already getting the current item in the select function.
So copy this.
Paste, then check if we're selecting the previous or next item by checking for up or down arrows if
direction this event, key argument equals arrow up.
And very importantly, an item previous to the current item exists, which we can check with current
item dot previous element sibling.
Remove this elected class from the current item with current item class list.
Remove.
And added to the previous sibling current item, a previous element, sibling class list, dot, add,
select it next handle in the exact same way that down arrow, meaning select the next item if it exists
or else if.
Direction equals arrow down.
And current item dot, next element sibling.
Removed, selected from the current item as before.
And added to the next sibling.
There, that should do save.
The first item gets elected when the app launches, so press down and the selection moves to the next
item up and back to the first so we can very easily select an item with either a mouse click or using
the keyboard.
And ultimately, the reason for being able to select an item is so that we can open it for reading.
So let's add the first version of that.
Staying in items dodges export a new function for opening the selected item.
Call it open.
No arguments with the very first thing to Czechia being whether we have items or else we'll just stop
trying.
Performing this check will ensure we don't have problems later when using keyboard or menu shortcuts
to open the selected item.
If not this storage length, so no items in the storage array return if we do have storage items, however,
proceed to getting the selected item later selected item equals using the same selector again.
I'll copy this.
And get the selected items, you are all this being so that we can open that item, saved your URL for
reading, assigning to content, you are all right now.
We don't have a way of getting the URL from the item, but an easy way to add it is as a data attribute
on the item element.
We can add that in a second, but the way we'll access this is through the item or selected items.
Data set WRAL.
The name will give to the data attribute.
Add that to all items when creating them in the add function set item URL as data attribute.
With item note, dot set attribute.
Data Desh, you R-AL, if you're not familiar with data attributes, I've linked to a short tutorial
in the lesson resources and setting that to item dot you are all the you are all property from this
item object.
We can test this log out the item URL in the open function for now.
Console or log opening item content neutral that you are.
Well we're getting from the selected item via this data attribute.
We still need a trigger for this open function.
Again, adding a listener in the ADD function when creating the item node.
We're already using a single click being to select an item.
So to open an item we can use a double click instead item node add event listener double click or double
click calling this dot open.
Keeping in mind that what will happen here is that the first click of this double click will select
the item as per the single click listener and the second click triggering the double click will call
the open function, opening the newly selected item.
Save all of this and test.
I'll switch back to the console so we can see that open log double click this first item and their opening
item, GitHub dot com and same for electron G.S..
Also selecting the item opened.
Note, however, that using a double click now highlights the item text.
Definitely not a good look for a desktop app.
We've covered fixing this in an earlier lesson.
So over to our stylesheet adding to our items.
Web kit user select none save.
Reload this window.
And now it all works without any selection, much better in the next lesson will create the window to
load this items you are all into.